<template>
    <div class="raise">
        <div>
            <div class="raise-search-seek">
                <i class="icon-sousuo iconfont"></i>
                <input type="text" placeholder="搜索需要帮助的服务" class="b-e b-0" @keyup="search" v-model="inputContent">
            </div>
            <div>
                <div class="raise-modal">
                     <ul>
                            <li v-for="(item , index) in showList" class="p-r">
                                <div class="width-75">
                                    <div class="m-t-28 flex">
                                        <!--头像、名字和学校-->
                                        <div class="row">
                                            <div>
                                                <img :src="item.usersTo.portrait" alt="" class="portrait">
                                            </div>
                                            <div class="m-l-14">
                                                <h2 class="fs-36 c-3">{{item.usersTo.nickName}}</h2>
                                                <p class="fs-24 c-3 m-t-18">{{item.school.name}}</p>
                                            </div>
                                        </div>
                                        <div class="rt fs-24">
                                            {{item.ago}}
                                        </div>
                                    </div>
                                    <!--筹帮内容-->
                                    <router-link :to="{path:'/raiseDetails',query:{id:item.payrollId}}">
                                        <div class="fs-30 c-3 m-t-18 l-h-4">
                                            <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！payrollId-->
                                            {{item.requirement}}
                                        </div>
                                        <div class="m-t-18">
                                            <img v-for="imgsrc in showList[index].payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                                        </div>

                                        <div class="m-t-18">
                                            <i class="iconfont icon-dingweiweizhi fs-30"></i>
                                            <span class="fs-24">{{item.payrollAddress}}</span>
                                        </div>
                                    </router-link>
                                    <!--<div class="raise-single c-f">
                                            可抢单
                                        </div>-->
                                    <div class="m-t-4 c-3">
                                        <div class="fs-24 fs-30">
                                            酬金:
                                            <span class="c-f3">￥{{item.payrollMoney2}}块</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="index-blank m-t-18">
                                </div>
                            </li>
                        </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { allDate, contrastDate, f } from '../../assets/js/common'

export default {
    data() {
        return {
            inputContent:"",
            showList:[]   //搜索后的筹帮
        };
    },
    methods: {
        // 搜索
        search(){
            var params = new URLSearchParams();            
            params.append("requirement", this.inputContent);
            params.append("school.schoolId", localStorage.schoolId);

            this.$http({
                method: 'post',
                url: localPath + '/payroll/findPagepPyroll',
                data:params
            }).then((data)=>{
                var arr =  data.data;

                //
                if(arr.rows != ""){
                      // 循环数据
                    for (let i = 0; i < data.data.rows.length; i++) {
                        //几分钟前
                        data.data.rows[i].ago = contrastDate(data.data.rows[i].createTime);
                        //  图片可能不是一张 通过逗号给分开
                        if (data.data.rows[i].payrollPicture == null) {

                        } else {
                            data.data.rows[i].payrollPicture = data.data.rows[i].payrollPicture.split(",");
                        }

                        // 将结束时间进行解析
                        data.data.rows[i].payrollTime = allDate(data.data.rows[i].payrollTime);
 
                    }

                    this.showList = arr.rows;
                    // console.log(this.showList);
                }


                console.log(data);
            }).cahch((error)=>{
                console.log(error);
            })
        },
        show(){  
             
          
        },
     

    },
 
    mounted() {
        document.addEventListener(f());
    }

};
</script>
<style>
.mint-cell-wrapper {
    padding: 0px 0px;
}

.raise-search-seek {
    width: 7rem;
    height: .5rem;
    margin: .2rem auto;
    padding: 0 .2rem;
    border-radius: 5px;
    background-color: #eeeeee;
}

.raise-portrait {
    width: .87rem;
    height: .87rem;
}

.raise-img {
    width: 1.83rem;
    height: 1.31rem;
}

.raise-single {
    width: 1.47rem;
    height: .6rem;
    position: absolute;
    right: .0rem;
    bottom: 0.8rem;
    border-radius: 24px 0px 0px 24px;
    padding: .12rem 0rem 0 .3rem;
    background-color: #fe8103;
}


/*导航条*/
.raise .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #c29354;
    color: #c29354;
    margin-bottom: 0px;
}


</style>
